<template>
  <!-- 城市天气项容器，添加鼠标移入移出事件 -->
  <div class="listitem" @mouseenter="handleButtonOpen" @mouseleave="handleButtonClosed">
    <!-- 城市信息展示区域，根据按钮显示状态切换样式 -->
    <div class="item-text" :class="{ active: buttonShow }">
      <span>{{ item.city }}</span
      ><span>{{ item.temperature }}℃</span>
    </div>
    <!-- 操作按钮区域，根据按钮显示状态决定是否展示 -->
    <div class="item-button" v-if="buttonShow">
      <button @click="handleOpenCityWeather">查看</button
      ><button @click="handleDeleteCity">删除</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { WeatherStore } from '@/stores/counter.js'
const weatherStore = WeatherStore()
const { removeCityWeather } = weatherStore

const router = useRouter()
const buttonShow = ref(false)
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
})

// 鼠标移入时显示操作按钮
const handleButtonOpen = () => {
  buttonShow.value = true
}
// 鼠标移出时隐藏操作按钮
const handleButtonClosed = () => {
  buttonShow.value = false
}
// 处理查看城市天气的点击事件
const handleOpenCityWeather = () => {
  router.push({
    name: 'cityweather',
    params: { Adcode: props.item.adcode },
    query: { search: props.item.city },
  })
}
// 处理删除城市天气的点击事件
const handleDeleteCity = () => {
  removeCityWeather(props.item.adcode)
}
</script>

<style lang="scss" scoped>
.listitem {
  display: flex;
  justify-content: space-between;
  .item-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    width: 100%;
    background-color: #004e71;
    margin-bottom: 15px;
    padding-inline: 15px;
    cursor: pointer;
    transition-duration: 0.5s;
    &.active {
      width: 80%;
      transition-duration: 0.2s;
    }
  }
  .item-button {
    display: flex;
    justify-content: space-between;
    button {
      margin-left: 10px;
      width: 80px;
      height: 40px;
      font-size: 18px;
      color: #fff;
      background-color: #eab308;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
  }
}
</style>